import React, { useState, useTransition } from "react";  
import { View, Button } from '@tarojs/components';  
  
const TransitionDemo: React.FC = () => {  
    const [strs, setStrs] = useState<string[]>([]);  
    const [isPending, startTransition] = useTransition();  
    const [active, setActive] = useState('A');  
  
    const newStrs = new Array(5000).fill(new Date().getTime() + '');  
    
    const lowLevelUpdate = (val: string) => {  
        setActive(val); // 同步更新 active
        setStrs([])
        startTransition(() => {  
            setStrs(newStrs); // 低优先级更新 strs  
        });  
    };  
  
    return (  
        <View className="page">  
            <View>是否执行中：{isPending ? '更新中...' : '未更新'}</View>  
            <Button  
                type={active === 'A' ? 'primary' : 'default'}  
                size="mini"  
                onClick={() => lowLevelUpdate('A')}  
            >  
                A执行低优先级事件  
            </Button>  
            <Button  
                type={active === 'B' ? 'primary' : 'default'}  
                size="mini"  
                onClick={() => lowLevelUpdate('B')}  
            >  
                B执行低优先级事件  
            </Button>  
            {!isPending && strs.map((val, index) => (  
                <View key={index}>{val}</View>  
            ))}  
        </View>  
    );  
};  
  
export default TransitionDemo;